 <!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8"> 
<link rel="shortcut icon" href="audio/hellokunwebmiao.jpg">
<title>OpenHarmony-iot</title> 

<link href="css/har.css" type="text/css" rel="stylesheet" />
<style>

javascript:;

</style>
</head>
<body>

<h1 align="center" >MRobot 云端设备控制</h1>
<div align ="center" id ="device_img">
    <img id="fan" src="images/fanOff.png" width="200" height="200"> 
    <img id="door" src="images/doorLock.png" width="200" height="200"> 
    <img id="lamb" src="images/lambOff.png" width="200" height="200">
    <img id="water" src="images/waterOff.png"width="200" height="200">
    </div>
<div align="center" id="control_btn">
    <button id="btn_fan" onClick="clickFan()" style="margin-left:120px; margin-top:10px"class="button" >  风扇</button> 
    <button id="btn_door" onClick="clickDoor()" style="margin-left:90px; margin-top:10px"class="button" >  开门</button> 
    <button id="btn_lamb" onClick="clickLamb()" style="margin-left:100px; margin-top:10px"class="button" > 台灯</button> 
    <button id="btn_water" onClick="clickWater()"style="margin-left:100px; margin-top:10px" class="button" >浇花</button>
</div>
 <text> 温湿度： </text>
 
 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div align = "left" id="test">
     <input type="text" id="msg" />
     <input type="button" id="input_value" value="发送消息" onclick="send()" />
     <button onclick="subscribe()">订阅信息</button>
     <button onclick="unsubscribe()">取消订阅</button>
     <div>连接状态：<span id="status"></span></div>
     <div>收到信息: <span id="getMsg"></span></div>
</div>


<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>

<script>
    
    var publish_topic="";
    var subscribe_topic = "";
    
    const options={
        connectTimeout:4000,
        keepalice:20,
        clean:true,
        clientId:'mqttjsks',
        username:'hellokun',
        password:'123456',
    }
    const client=mqtt.connect('ws://120.55.170.12:8083/mqtt',options)
    
    client.on('reconnect', (error) => {
     document.getElementById("status").innerText = '正在重连';
     console.log('正在重连:', error)
     })
     
    client.on('error',(error)=>{
        document.getElementById("status").innerText='Faild';
        console.log('connect faild:',error)
    })
    
    client.on('connect', (e) => {
     document.getElementById("status").innerText = '成功';
     console.log('成功连接服务器');
     // 监听接收消息事件
     client.on('message', (topic, message) => {
     console.log('收到来自', topic, '的消息', message.toString())
     document.getElementById("getMsg").innerText = message.toString();
       
    //test
    //   switch(message.toString())
    //   {
    //       case "message number 5" :
    //           {
    //               console.log("niubility!!!!!");
    //               document.getElementById("msg").value = "31";
    //               this.publish_topic = "web_lamb_btn";
    //         	  console.log(this.publish_topic);
    //         	  this.send();
    //         	  return;
    //           }
    //   }
    
         // fan
            if(message.toString()=="turn on fan lev1")
         {
          console.log("niubility!!!!!");
          document.getElementById("msg").value = "11";
          this.publish_topic = "web_fan_btn";
    	  console.log(this.publish_topic);
    	  this.send();
    	  return;
         }
            if(message.toString()=="turn on fan lev2")
         {
          console.log("niubility!!!!!");
          document.getElementById("msg").value = "12";
          this.publish_topic = "web_fan_btn";
    	  console.log(this.publish_topic);
    	  this.send();
    	   return;
         }
            if(message.toString()=="turn on fan lev3")
         {
          console.log("niubility!!!!!");
          document.getElementById("msg").value = "13";
          this.publish_topic = "web_fan_btn";
    	  console.log(this.publish_topic);
    	  this.send();
    	   return;
         }
             if(message.toString()=="turn off fan")
         {
          console.log("niubility!!!!!");
          document.getElementById("msg").value = "10";
          this.publish_topic = "web_fan_btn";
    	  console.log(this.publish_topic);
    	  this.send();
    	   return;
         }
         
       // door
            if(message.toString()=="open door")
         {
          console.log("niubility!!!!!");
          document.getElementById("msg").value = "21";
          this.publish_topic = "web_door_btn";
    	  console.log(this.publish_topic);
    	  this.send();
    	   return;
         }
  
       //lamb
        if(message.toString()=="turn on lamb lev1")
         {
          console.log("niubility!!!!!");
          document.getElementById("msg").value = "31";
          this.publish_topic = "web_lamb_btn";
    	  console.log(this.publish_topic);
    	  this.send();
    	  return;
         }
            if(message.toString()=="turn on lamb lev2")
         {
          console.log("niubility!!!!!");
          document.getElementById("msg").value = "32";
          this.publish_topic = "web_lamb_btn";
    	  console.log(this.publish_topic);
    	  this.send();
    	   return;
         }
            if(message.toString()=="turn on lamb lev3")
         {
          console.log("niubility!!!!!");
          document.getElementById("msg").value = "33";
          this.publish_topic = "web_lamb_btn";
    	  console.log(this.publish_topic);
    	  this.send();
    	  return;
    	  
         }
            if(message.toString()=="turn off lamb")
         {
          console.log("niubility!!!!!");
          document.getElementById("msg").value = "30";
          this.publish_topic = "web_lamb_btn";
    	  console.log(this.publish_topic);
    	  this.send();
    	  return;
    	  
         }
        // water
            if(message.toString()=="go ahead water")
         {
          console.log("niubility!!!!!");
          document.getElementById("msg").value = "41";
          this.publish_topic = "web_water_btn";
    	  console.log(this.publish_topic);
    	  this.send();
    	   return;
         }
     })
     })
    //订阅话题
     function subscribe() {
     if (client.connected) {
     client.subscribe(this.subscribe_topic);
     document.getElementById("status").innerText = '开始订阅';
     }
     }
     //取消订阅话题
     function unsubscribe() {
     if (client.connected) {
     client.unsubscribe(this.subscribe_topic, (error) => {
     console.log(error || '取消订阅')
     document.getElementById("status").innerText = '取消订阅';
     })
    }
   }
  
  //发布话题
     function send() {
     var s = document.getElementById("msg").value;
     if (s.length > 0) {
     client.publish(this.publish_topic, s, (error) => { 
     console.log(error || '消息发布成功')
     })
     document.getElementById("msg").value = "";
     console.log("消息发送成功" + s);
     } else {
     alert("发送的消息不能为空");
     }
     }
     </script>


<script>
    var myAudio= document.getElementById("audio_1");
	function clickup(){
		//alert("up");
		document.getElementById("msg").value = "a";
		send();
	}
	function clickStart(){
		//alert("up");
		document.getElementById("msg").value = "s";
	    myAudio.play();
	    subscribe();
	    send();
	}
	function clickdown(){
		//alert("down");
		document.getElementById("msg").value = "z";
		send();
	}
	function clickleft(){
		//alert("left");
		document.getElementById("msg").value = "l";
		send();
	}
	
	var numfan=1;
	var numdoor=1;
	var numlamb=1;
	var numwater=1;
	function clickFan(){
		//alert("打开风扇");
		numfan=numfan+1;
		if(numfan%2==1)	{
		    document.getElementById("fan").src = "images/fanOff.png";
		    document.getElementById("msg").value = "10";
		}
		else {
		    document.getElementById("fan").src = "images/fanOn.png";
		    document.getElementById("msg").value = "13";
		}
		this.publish_topic = "web_fan_btn";
		this.subscribe_topic="fan";
		this.subscribe();
		console.log(this.publish_topic);
		this.send();
		document.getElementById("input_value").value = this.publish_topic;
	}
	function clickDoor(){
	//	alert("开门");
	    numdoor=numdoor+1;
		if(numdoor%2==1)	{
		    document.getElementById("door").src = "images/doorLock.png";
		    document.getElementById("msg").value = "20";
		}
		else {
		    document.getElementById("door").src = "images/doorOpen.png";
		    document.getElementById("msg").value = "21";
		}
		this.publish_topic = "web_door_btn";
	//	this.subscribe_topic="door";
	//	this.subscribe();
		console.log(this.publish_topic);
		this.send();
		document.getElementById("input_value").value = this.publish_topic;
	}
		function clickLamb(){
		//alert("打开台灯");
		numlamb=numlamb+1;
		if(numlamb%2==1)	{
		    document.getElementById("lamb").src = "images/lambOff.png";
		    document.getElementById("msg").value = "30";
		}
		else {
		    document.getElementById("lamb").src = "images/lambOn.png";
		    document.getElementById("msg").value = "31";
		}
		this.publish_topic = "web_lamb_btn";
		this.subscribe_topic="lamb_union";
		this.subscribe();
		console.log(this.publish_topic);
		this.send();
		document.getElementById("input_value").value = this.publish_topic;
	}
		function clickWater(){

		numwater=numwater+1;
		if(numwater%2==1)	{
		    document.getElementById("water").src = "images/waterOff.png";
		    document.getElementById("msg").value = "40";
		}
		else {
		    document.getElementById("water").src = "images/waterOn.png";
		    document.getElementById("msg").value = "41";
		}
		this.publish_topic = "web_water_btn";
		this.subscribe_topic="water_mq2";
		this.subscribe();
		this.subscribe_topic="water_humi";
		this.subscribe();
		this.subscribe_topic="water_temp";
		this.subscribe();
		this.subscribe_topic="water_union";
		this.subscribe();
		console.log(this.publish_topic);
		this.send();
		document.getElementById("input_value").value = this.publish_topic;
	}
	
	
</script>

</body>
</html>




















